import React, { FC } from 'react';
import { View, Text, Image } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
export interface IProps extends ICompProps {
    messageType: 'sys' | 'order' | 'interact';
    isRead: boolean;
}
MessageImage.defaultProps = {} as Partial<IProps>;
function MessageImage(props: IProps) {
    const { className, style, messageType, isRead } = props;
    const localClassName = useClassName('MessageImage', className);
    const chooseIcon = (type: 'sys' | 'order' | 'interact') => {
        let icon = null;
        switch (type) {
            case 'sys':
                // icon = <>&#xe620;</>;
                icon = <Image className="img" src={require('@/assets/images/message-system.png')}></Image>;
                break;
            case 'order':
                // icon = <>&#xe610;</>;
                icon = <Image className="img" src={require('@/assets/images/message-order.png')}></Image>;
                break;
            default:
                // icon = <>&#xe624;</>
                icon = <Image className="img" src={require('@/assets/images/message-interact.png')}></Image>;
        }
        return icon;
    };
    return (
        <RootView className={localClassName} style={style}>
            {chooseIcon(messageType)}
            <View style={{ display: isRead ? 'none' : 'block' }} className="redDot"></View>
        </RootView>
    );
}
export default React.memo(MessageImage as FC<IProps>);
const RootView = styled(View)`
    &.MessageImage {
        width: 96px;
        height: 96px;
        position: relative;
        .img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
        .icon {
            font-size: 96px;
            color: #ff8828;
        }
        .redDot {
            position: absolute;
            top: 12px;
            right: 0px;
            width: 20px;
            height: 20px;
            background: #f44336;
            border-radius: 50%;
        }
    }
`;
